<template>
<div id="resultWrapper">
<div id="result" v-if=" message == null || message == '' ">
    <div class="content-wrapper">
        <div class="coursewrapper">
                   <!-- 已击败的比例-->
            <div class="rate clearfix">       
                    你已击败<span>{{ result!=null ?  result.beat : 0}}%</span>的用户!
            </div>
            <CourseTop></CourseTop>
            <CourseBottom></CourseBottom>
            <CourseCenter></CourseCenter>
            <CourseRight></CourseRight>
        </div>
    </div>
    </div>
    <div v-else>
    <span class="nonewrapper">没有pushid的健身记录</span>
    </div>

    <Loading v-if="LoadingShow"></Loading>
</div>
</template>
<script>
    import CourseCenter from "./result-coursecenter.vue";
    import CourseTop from "./result-record.vue";
    import CourseBottom from "./result-ranking.vue";
    import CourseRight from "./result-rightaction.vue";
    // import Anal from "./result-anal.vue";
    import Loading from '../loading.vue';
    import {
        refreshTitle
    } from "../../tools.js";
    import api from "../../api"
    export default {
        created() {
            //根据获取来的路由传递过来的title进行title的轮换

            //我不清楚为什么title设置不生效，采取的补救方法
            this.$route.meta.title = this.$route.params.title;

            //正常的title的设置方法，但是有一天他不生效了
            refreshTitle(this.$route.params.title);

            // 获取数据
            this.getResult();

        },
        components: {
            CourseCenter,
            CourseTop,
            CourseBottom,
            CourseRight,
            Loading
        },
        computed: {
            Select() {
                if (this.select == 1) {
                    return true
                } else {
                    return false
                }
            },
            LoadingShow() {
                return this.$store.state.loadings.show
            },
            // getR() {
            //     return this.$store.state.result
            // },
        },
        data() {
            return {
                title: this.$route.params.title,
                select: 1,
                result: [],
                kcalnum: [],
                message: '',
            }
        },
        methods: {
            changeSelect1() {
                //改变select的值
                this.select = 1;
            },
            changeSelect2() {
                //改变select的值
                this.select = 2;
            },
            // 获取结果也得信息----进行判断数据是否为不为空
            getResult() {
                var that = this;
                api.getResultBY(this.$route.params.id).then(function(response) {
                    if (response.data.code === 201) {
                        that.message = response.data.message;
                    } else if (response.data.code === 200) {
                        that.message = '';
                        that.result = response.data.result;
                    }
                })
            }
            // }
        },
        mounted() {

            this.$nextTick(function() {
                this.getResult();
                document.body.scrollTop = 0;
            })
        },
    }
</script>
<style>
    #resultWrapper {
        #result {
            /*padding-bottom: 50px;*/
            .top {
                width: 100%;
                height: 50px;
                background-color: #31384b;
            }
            .top .course_grade,
            .top .active_anal {
                width: 50%;
                height: 100%;
                box-sizing: border-box;
                float: left;
            }
            .top .course_grade .grade {
                width: 50%;
                height: 100%;
                /*background-color: pink;*/
                float: right;
                font-size: 16px;
                line-height: 50px;
                text-align: center;
                margin-right: 20%;
                color: #fff;
            }
            .top .active_anal .anal {
                width: 50%;
                height: 100%;
                float: left;
                font-size: 16px;
                line-height: 50px;
                text-align: center;
                margin-left: 20%;
                color: #fff;
            }
            .top .course_grade .active,
            .top .active_anal .active {
                border-bottom: 3px solid #00bb9c;
                box-sizing: border-box;
                font-size: 20px;
            }
            .content-wrapper {
                width: 100%;
                /*height: 400px;*/
            }
            .content-wrapper .coursewrapper {
                width: 100%;
                /*height: 2400px;*/
                /*background-color: red;*/
                /*background-color: red;*/
            }
            .content-wrapper .coursewrapper .rate {
                width: 60%;
                height: 30px;
                background-color: #fdb602;
                margin-left: 20%;
                color: #181818;
                font-size: 16px;
                line-height: 30px;
                text-align: center;
                margin-top: 10px;
                margin-bottom: 10px;
            }
            .content-wrapper .analwrapper {
                width: 100%;
                height: 100%;
                /*background-color: pink;*/
            }
        }
        .nonewrapper {
            display: block;
            width: 100%;
            height: 40px;
            position: absolute;
            left: 0;
            top: -30%;
            right: 0;
            bottom: 0;
            margin: auto;
            line-height: 40px;
            text-align: center;
            color: rgba(253, 184, 1, 1);
            font-size: 14px;
            border-bottom: 1px solid rgba(253, 184, 1, 1);
            padding: 0;
        }
    }
</style>